import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    console.error('应用错误:', error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={{ 
          padding: '20px', 
          textAlign: 'center',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh'
        }}>
          <Text style={{ fontSize: '18px', marginBottom: '20px' }}>应用出现了问题</Text>
          <Button onClick={() => Taro.reLaunch({ url: '/pages/index/index' })}>
            返回首页
          </Button>
        </View>
      )
    }

    return this.props.children
  }
}

export default ErrorBoundary